<template>
	<view class="container">
		<view class="tui-bg"></view>
		<view class="tui-content">
			<view class="tui-form">
				<image src="/static/images/mall/img_recharge_success.png" class="tui-icon"></image>
				<view class="tui-title">订单已支付成功</view>
				<view class="tui-sub-title">非常感谢您购买我们的产品</view>
				<view class="tui-sub-title">点击立即抽奖按钮，获得你的红包幸运值</view>

				<view class="tui-btn-box">
					<tui-button type="danger" :shadow="true" width="240rpx" height="70rpx" :size="28" shape="circle" @click="doShowLuckNum()">立即抽奖</tui-button>
					<tui-button type="danger" width="240rpx" height="70rpx" :size="28" :plain="true" shape="circle" @click="goHomePage()">返回首页</tui-button>
				</view>
			</view>
		</view>
		
		<view class="main-wrap" v-if="false">
			<view class="center">
				<view class="tui-dot" :class="['tui-dot-'+(index+1)]" v-for="(item,index) in circleList" :key="index"></view>
				<view class="tui-container-in">
					<view class="tui-content-out" :class="['tui-award-'+(index+1),index==indexSelect?'tui-awardSelect':'']" v-for="(item,index) in prizeList" :key="index">
						<image class="tui-award-image" :src="item.img_logo"></image>
					</view>
					<view class="tui-btn-start" :class="[isRunning?'tui-ative':'']" @tap="startDrawing">立即抽奖</view>
				</view>
			</view>
		</view>
		
		
		<view class="main-wrap">
			<view class="center-2">
				<view class="luck-loading" v-show="showLuckLoading">
					<fui-loading :isFixed="false" text="幸运值抽取中" size="30" :isMask="true"></fui-loading>
				</view>
				<view class="luck-num" v-show="showLuckNum">{{luckRate}}</view>
				<view class="luck-tip" v-show="showLuckTip">{{luckTip}}</view>
				<view class="luck-text" v-show="showLuckText" @click="doShowLuckNum()">立即抽奖</view>
			</view>
		</view>
		
		<view class="tui-tips">
			<view class="tui-grey">温馨提示:</view>
			<view class="tui-light-grey">
				付款成功后，商城不会以付款异常、卡单、系统升级为由联系您。请勿泄露微信账号、手机验证码，否则会造成钱款损失！谨防电话诈骗！
			</view>
		</view>
	</view>
</template>

<script>
	import footerMenu from "@/components/footer-menu.vue"
	import tuiButton from "@/components/thorui/tui-button/tui-button"
	import tuiIcon from "@/components/thorui/tui-icon/tui-icon.vue"
	import tuiTabs from "@/components/thorui/tui-tabs/tui-tabs"
	import tuiListView from "@/components/thorui/tui-list-view/tui-list-view"
	import tuiListCell from "@/components/thorui/tui-list-cell/tui-list-cell"
	import tuiBadge from "@/components/thorui/tui-badge/tui-badge.vue"
	import fuiLoading from "@/components/firstui/fui-loading/fui-loading.vue"
	export default {
		components: {
			footerMenu,
			tuiButton,
			tuiIcon,
			tuiTabs,
			tuiListView,
			tuiListCell,
			tuiBadge,
			fuiLoading,
		},
		data() {
			return {
				prepayId: 0,
				
				type: 0,
				signId: 0,
				orderId: 0,
				canLottery: false,		//是否可抽奖
				
				myId: 0,
				myPhone:0,
				
				circleList: 24, //圆点
				prizeId: 0,		//中奖的ID
				prizeVal: 0,	//val
				prizeLuckNum: 0,	//中奖的数
				
				prizeList: [],
				myWinList: [],
				
				indexSelect: 7, //被选中的奖品index
				isRunning: false, //是否正在抽奖
				
				showLuckNum: false,
				showLuckTip: false,
				showLuckText: true,
				showLuckLoading: false,
				
				luckRate: 0,
				luckTip: '',
				
			}
		},
		methods: {
			
			
			goHomePage: function(){
				uni.switchTab({
					url: "/pages/site/index"
				})
			},
			
			goMyOrderIndex: function(){
				uni.navigateTo({
					url: "/pages/my-order/index"
				})
			},
			

			//得到奖品的列表
			getPrizeList: function() {
				uni.request({
					url: this.$apiUrl + '/api/order/prizeList',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId')
					},
					success: (res) => {
						let resData = res.data['data'];
						this.prizeList = resData;
					}
				});
			},
			
			//获取随机数
			getRandom: function(u) {
				let rnd = Math.random() > 0.5 ? "2" : "1";
				u = u || 3;
				for (var i = 0; i < u; i++) {
					rnd += Math.floor(Math.random() * 10);
				}
				return Number(rnd);
			},
			
			//
			doShowLuckNum: function() {
				this.showLuckLoading = true;
				this.showLuckNum = false;
				this.showLuckTip = false;
				this.showLuckText = false;
				uni.request({
					url: this.$apiUrl+ '/api/order/runLotteryNew',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId')
					},
					data: {
						type: this.type,
						prepay_id: this.prepayId,
					},
					success: (res) => {
						let resData = res.data['data'];
						
						let resErr = res.data['error'];
						let resMsg = res.data['msg'];
						if(resErr == 0) {
							let luckRate = resData.luck_rate;
							let luckTip = resData.luck_tip;
							this.luckRate = luckRate;
							this.luckTip = luckTip;
							setTimeout(() => {
								this.showLuckNum = true;
								this.showLuckTip = true;
								this.showLuckLoading = false;
							}, 2000);
						}else{
							this.showLuckNum = false;
							this.showLuckLoading = false;
							this.tui.toast(resMsg, 3000, false);
							setTimeout(() => {
								uni.navigateTo({
									url: "/pages/my-order/index"
								});
							}, 3000);
							return;
						}
					}
				});
			},
			
			
			
			//开始抽奖
			startDrawing: function() {

				//判断该条件是否符合抽奖
				uni.request({
					url: this.$apiUrl+ '/api/order/runLottery',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId')
					},
					data: {
						type: this.type,
						prepay_id: this.prepayId,
					},
					success: (res) => {
						let resErr = res.data['error'];
						let resMsg = res.data['msg'];
						if(resErr == 0) {
							
							let redData = res.data['data'];
							this.prizeId = redData['prize_id'];
							this.prizeVal = redData['prize_val'];
							this.prizeLuckNum = redData['prize_luck_num'];
							
							if (this.isRunning) return
							this.isRunning= true;
							let indexSelect = 0;
							let i = 0;
							let randomNum = this.prizeLuckNum;
						//	let randomNum = 100;
						
							console.log(randomNum);
							
							let timer = setInterval(() => {
								++indexSelect;
								//这里用y=30*x+150函数做的处理.可根据自己的需求改变转盘速度
								indexSelect = indexSelect % 8;
								this.indexSelect = indexSelect;
								
								i += 1;
								console.log(indexSelect+'==='+i);
								if (i > randomNum) {
									//去除循环
									clearInterval(timer)
									timer = null;
									//获奖提示
									uni.showModal({
										title: '恭喜您中奖了',
										content: '获得了订单【'+this.prizeList[indexSelect].name+'】',
										confirmColor: '#5677FC',
										showCancel: false, //去掉取消按钮
										success: (res) => {
											if (res.confirm) {
												this.isRunning = false;
												uni.navigateTo({
													url: "/pages/my-order/index"
												})
											}
										}
									})
									
								}
							}, (70 + i))
			
						}else{
							this.tui.toast(resMsg, 2000, false);
							return;
						}
					}
				});
			},
			
			
			
		},
		
		//页面加载的时候
		onLoad: function(options) {
			this.prepayId = options.prepay_id || 0;
		//	this.getPrizeList();

		},
	}
</script>

<style>
	.tui-bg {
		width: 100%;
		height: 260rpx;
		background: linear-gradient(20deg, #E41F19, #F34B0B);
		border-bottom-left-radius: 42rpx;
	}

	.tui-content {
		padding: 0 35rpx;
		box-sizing: border-box;
	}

	.tui-form {
		background: #fff;
		height: 550rpx;
		box-shadow: 0 10rpx 14rpx 0 rgba(0, 0, 0, 0.08);
		border-radius: 10rpx;
		margin-top: -160rpx;
		position: relative;
		z-index: 10;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.tui-icon {
		width: 100rpx;
		height: 100rpx;
		display: block;
		margin-top: 60rpx;
	}

	.tui-title {
		font-size: 42rpx;
		line-height: 42rpx;
		padding-top: 28rpx;
	}

	.tui-sub-title {
		color: #666666;
		font-size: 28rpx;
		line-height: 28rpx;
		padding-top: 20rpx;
	}

	.tui-btn-box {
		width: 580rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 66rpx;
	}

	.tui-tips {
		font-size: 26rpx;
		padding: 48rpx 90rpx;
		box-sizing: border-box;
		text-align: justify;
		line-height: 48rpx;
		margin-bottom: 200rpx;
	}

	.tui-grey {
		color: #666;
	}

	.tui-light-grey {
		color: #888;
	}
	
	.main-wrap{
		background-size:100%;width: 750rpx;height: 700rpx;
	}
	.center{height: 600upx;width: 650upx;background-color: #fc4034;margin: 50upx auto;border-radius: 40upx;box-shadow: 0 10px 0 #d80014;position: relative;}
	
	.center-2{height: 600upx;width: 650upx;background-color: #fc4034;margin: 50upx auto;border-radius: 40upx;box-shadow: 0 10px 0 #d80014;position: relative;padding:200rpx200rpx}
	
	.rule{width: 660rpx;height: 368rpx;margin: 0 auto;padding-top: 180rpx;}
	.rule-p{color: #fff;font-size: 26rpx;line-height: 46rpx;font-family: 'Courier New', Courier, monospace;}
	
	.tui-container-in {
		width: 580upx;
		height: 530upx;
		background-color: #d80014;
		border-radius: 40upx;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}
	
	/**小圆点 start*/
	
	.tui-dot {
		position: absolute;
		display: block;
		border-radius: 50%;
		height: 20upx;
		width: 20upx;
	}
	
	.tui-dot:nth-child(odd) {
		background: #fff;
		animation: 0.5s odd linear infinite;
	}
	
	.tui-dot:nth-child(even) {
		background: #fcf400;
		animation: 0.5s even linear infinite;
	}
	
	.tui-dot-1 {
		left: 15upx;
		top: 15upx;
	}
	
	.tui-dot-2 {
		left: 117.5upx;
		top: 7.5upx;
	}
	
	.tui-dot-3 {
		left: 220upx;
		top: 7.5upx;
	}
	
	.tui-dot-4 {
		left: 322.5upx;
		top: 7.5upx;
	}
	
	.tui-dot-5 {
		left: 425upx;
		top: 7.5upx;
	}
	
	.tui-dot-6 {
		left: 527.5upx;
		top: 7.5upx;
	}
	
	.tui-dot-7 {
		left: 620upx;
		top: 15upx;
	}
	
	.tui-dot-8 {
		left: 622upx;
		top: 109upx;
	}
	
	.tui-dot-9 {
		left: 622upx;
		top: 203upx;
	}
	
	.tui-dot-10 {
		left: 622upx;
		top: 297upx;
	}
	
	.tui-dot-11 {
		left: 622upx;
		top: 391upx;
	}
	
	.tui-dot-12 {
		left: 622upx;
		top: 485upx;
	}
	
	.tui-dot-13 {
		left: 620upx;
		top: 565upx;
	}
	
	.tui-dot-14 {
		left: 517.5upx;
		top: 572upx;
	}
	
	.tui-dot-15 {
		left: 415upx;
		top: 572upx;
	}
	
	.tui-dot-16 {
		left: 312.5upx;
		top: 572upx;
	}
	
	.tui-dot-17 {
		left: 210upx;
		top: 572upx;
	}
	
	.tui-dot-18 {
		left: 107.5upx;
		top: 572upx;
	}
	
	.tui-dot-19 {
		left: 15upx;
		top: 565upx;
	}
	
	.tui-dot-20 {
		left: 7.5upx;
		top: 471upx;
	}
	
	.tui-dot-21 {
		left: 7.5upx;
		top: 377upx;
	}
	
	.tui-dot-22 {
		left: 7.5upx;
		top: 283upx;
	}
	
	.tui-dot-23 {
		left: 7.5upx;
		top: 189upx;
	}
	
	.tui-dot-24 {
		left: 7.5upx;
		top: 95upx;
	}
	
	@-webkit-keyframes odd {
		0% {
			background: #fff;
		}
	
		100% {
			background: #fcf400;
		}
	}
	
	@keyframes odd {
		0% {
			background: #fff;
		}
	
		100% {
			background: #fcf400;
		}
	}
	
	@-webkit-keyframes even {
		0% {
			background: #fcf400;
		}
	
		100% {
			background: #fff;
		}
	}
	
	@keyframes even {
		0% {
			background: #fcf400;
		}
	
		100% {
			background: #fff;
		}
	}
	
	/**小圆点 end*/
	
	.tui-content-out {
		position: absolute;
		height: 150upx;
		width: 168upx;
		background-color: #fcecec;
		border-radius: 15upx;
		box-shadow: 0 4px 0 #fcc8d0;
	}
	
	/* 580 530  */
	
	.tui-award-1 {
		left: 24upx;
		top: 24upx;
	}
	
	.tui-award-2 {
		left: 206upx;
		top: 24upx;
	}
	
	.tui-award-3 {
		left: 388upx;
		top: 24upx;
	}
	
	.tui-award-4 {
		left: 388upx;
		top: 188upx;
	}
	
	.tui-award-5 {
		left: 388upx;
		top: 352upx;
	}
	
	.tui-award-6 {
		left: 206upx;
		top: 352upx;
	}
	
	.tui-award-7 {
		left: 24upx;
		top: 352upx;
	}
	
	.tui-award-8 {
		left: 24upx;
		top: 188upx;
	}
	
	/**居中 加粗*/
	
	.tui-btn-start {
		position: absolute;
		top: 188upx;
		left: 206upx;
		border-radius: 15upx;
		height: 150upx;
		width: 168upx;
		background-color: #fc4034;
		box-shadow: 0 4px 0 #fcc8d0;
		color: #fcf400;
		text-align: center;
		font-size: 32upx;
		font-weight: bold;
		line-height: 150upx;
	}
	
	.tui-ative {
		opacity: 0.6 !important;
	}
	
	.tui-award-image {
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		height: 134upx;
		width: 134upx;
		border-radius: 20rpx;
	}
	
	.tui-awardSelect {
		background-color: #fcf400 !important;
		box-shadow: 0 4px 0 rgb(240, 208, 12) !important;
	}
	
	.luck-loading{
		padding: 200rpx 0;
	}
	
	.luck-num{
		padding-top: 200rpx;
		font-size: 200rpx;
		color: #fcf400;
		text-align: center;
		font-weight: bold;
	}
	
	.luck-tip{
		padding: 60rpx;
		font-size: 40rpx;
		line-height: 66rpx;
		color: #fcf400;
		text-align: center;
		font-weight: bold;
		margin-top:40rpx;
	}
	
	.luck-text{
		padding: 250rpx 100rpx;
		font-size: 66rpx;
		color: #fcf400;
		text-align: center;
		font-weight: bold;
	}
</style>